<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WK科技</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta name="description" content="致力于打造最大的芯片平台" />
    <meta name="keywords" content="芯片，半导体，集成电路" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        i,
        em {
            font-style: normal;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            background-color: #dadbf8;
        }

        .main {
            display: flex;
            position: absolute;
            top: 16px;
            left: 15px;
            width: 97vw;
            height: 95vh;
            background-color: #fafafc;
            border-radius: 20px;
            overflow: hidden;
        }

        .tab {
            height: 100%;
            width: 15vw;
            background-color: #fafafc;
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .header {
            width: 100%;
            height: 7vh;
            line-height: 7vh;
            background-color: #fafafc;
            border-bottom: 1px solid #fff;
        }

        .header i {
            font-size: 1.6vw;
            margin-left: 1.1vw;
            cursor: pointer;
        }

        .header i:nth-child(2) {
            margin-left: 70vw;
        }

        .big-content {
            position: relative;
            overflow: auto;
            display: flex;
            flex: 1;
            width: 100%;
            background-color: #f2f2f8;
        }

        .content {
            flex: 1;
        }

        .scroll {
            height: 100%;
            width: 1.1vw;
            background-color: #fafafc;
        }

        .logo {
            padding: 10px;
            height: 60px;
            line-height: 60px;
            margin-bottom: 20px;
            border-bottom: 1px solid #fff;
        }

        .out {
            width: 60px;
            height: 60px;
            line-height: 60px;
            overflow: hidden;
            border-radius: 50%;
        }

        .out img {
            width: 107%;
            height: 107%;
            margin-left: -2px;
            margin-top: -2px;
        }

        .chuangjian {
            position: relative;
            width: 90%;
            height: 50px;
            line-height: 50px;
            background-color: #6466e2;
            padding: 0;
            text-align: center;
            color: #fff;
            margin-bottom: 5px;
            border-radius: 10px;
            margin-left: 10px;
            cursor: pointer;
        }

        .box1 {
            display: none;
            position: absolute;
            top: 0;
            right: -130px;
            width: 130px;
            height: 170px;
            padding: 2px 5px 0;
            border-radius: 5px;
            background-color: #fff;
        }

        .box1 em {
            height: 29%;
            width: 100%;
            display: block;
            color: #fff;
            font-size: 14px;
            background-color: #9d9ee6;
        }

        .box1 i {
            display: block;
            font-size: 13px;
            margin-top: -13px;
            height: 5%;
            color: black;
        }

        .chuangjian:hover .box1 {
            z-index: 9;
            display: block;
        }

        .box1 em:hover {
            background-color: #5355c7;
        }

        ul {
            width: 100%;
            height: 100%;
            padding: 10px;
        }

        .tab li {
            position: relative;
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-bottom: 3px;
            border-radius: 10px;
            padding-left: 20px;
            cursor: pointer;
            font-size: 1.1vw;
            overflow: hidden;
        }

        .tab li div {
            width: 100%;
            height: 4vh;
            line-height: 4vh;
            font-size: 14px;
            margin-left: -0.8vw;
            margin-bottom: 4px;
            border-radius: 10px;
            padding-left: 1.7vw;
            background-color: #5355c7;
        }

        .tab li:hover {
            color: #fff;
            background-color: #5355c7;
        }

        .tab li i {
            margin-right: 0.9vh;
        }

        .xialakuang,
        .xialakuang2,
        .xialakuang3,
        .xialakuang4,
        .xialakuang5 {
            display: block;
            height: 2.7vw;
            font-size: 1vw;
            padding-left: 4vw;
            border-radius: 5px;
            width: 70%;
            cursor: pointer;
            color: #6466e2;
        }

        .xialakuang:hover,
        .xialakuang2:hover,
        .xialakuang3:hover,
        .xialakuang4:hover,
        .xialakuang5:hover {
            color: #16186d;
        }

        .color {
            background-color: #5355c7;
            color: #fff;
        }


        .content_top {
            width: 94%;
            height: 465px;
            background-color: pink;
            margin: 0 auto;
        }

        .content_ok_top {
            margin-top: 40px !important;
            width: 94%;
            height: 465px;
            background-color: white;
            margin: 0 auto;
            overflow: hidden;
        }

        .content_ok_top_title {
            width: 100%;
            height: 45px;
            border-bottom: 1.5px solid rgb(213, 213, 213);
            display: flex;
            justify-content: space-between;
            align-content: center;
        }

        .content_ok_top_title h5 {
            font-size: 16px;
            line-height: 45px;
            margin-left: 28px;
            font-weight: 700;
        }

        .content_ok_bottom {
            width: 94%;
            height: 465px;
            margin-top: 50px !important;
            background-color: white;
            margin: 0 auto;
            overflow: hidden;
        }

        .content_ok_top_title_xl {
            width: 370px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content_max {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #tuBiao1 {
            width: 70%;
            max-width: 70%;
            height: 100%;
        }

        .c_right {
            width: 30%;
            max-width: 30%;
            height: 100%;
            background-color: white;
        }

        #tuBiao2 {
            width: 70%;
            max-width: 70%;
            height: 100%;
        }

        .right_list_main {
            width: 100%;
            background-color: white;
        }

        .right_list_main li {
            margin: 10px 0px;
        }

        .right_list_main li span:first-child {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            background-color: rgb(128, 16, 255);
            border-radius: 50%;
        }

        .right_list_main li span:nth-child(2) {
            margin-left: 15px;
        }

        .right_list_main li span:last-child {
            float: right;
        }
    </style>
</head>

<body>
    <div class="main">
        <!--左边导航栏 -->
        <div class="tab">
            <div class="logo">
                <div class="out">
                    <img src="./images/logo4.png" alt="" />
                </div>
            </div>
            <div class="chuangjian">
                创建项目
                <i class="iconfont icon-jia"></i>
            </div>
            <div class="gainian1 xialakuang4 la" style="display: none">
                项目概念
            </div>
            <div class="renwu1 xialakuang4 la" style="display: none">任务列表</div>
            <div class="chuangjian1 xialakuang4 la" style="display: none">
                创建任务
            </div>
            <ul>
                <li class="pan"><i class="iconfont icon-yibiaopan"></i>仪表盘</li>
                <li class="item">
                    <i class="iconfont icon-shuxie"></i>
                    我的项目
                    <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
                <div class="yy_liebiao xialakuang kapian la" style="display: none">
                    项目
                  </div>
                <div class="liebiao xialakuang kapian la" style="display: none">
                    列表显示
                </div>
                <div class="renwu2 xialakuang la" style="display: none">任务管理</div>
                <div class="wenjian2 xialakuang la" style="display: none">
                    文件管理
                </div>
                <div class="gainian2 xialakuang la" style="display: none">
                    概念动态
                </div>
                <div class="tongji xialakuang la" style="display: none">统计</div>
                <li class="renwu">
                    <i class="iconfont icon-renwu"></i>我的任务
                    <i class="xiala xialaone iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
                <div class="yy_renwu xialakuang5 la" style="display: none">
                    任务
                  </div>
                <div class="bianji xialakuang5 la" style="display: none">
                    编辑任务
                </div>
                <li class="baobiao">
                    <i class="iconfont icon-baobiao"></i>报表管理
                    <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
          <div class="yy_baobiao xialakuang2 la" style="display: none">报表</div>

                <div class="fenbu xialakuang2 la" style="display: none">任务分布</div>
                <div class="jinzhan xialakuang2 la" style="display: none">
                    任务进展
                </div>
                <li class="xitong">
                    <i class="iconfont icon-xitongshezhi"></i>系统设置
                    <i class="xiala iconfont icon-jiantou_liebiaozhankai"></i>
                </li>
                <div class="xiaoxi xialakuang3 la" style="display: none">
                    消息管理
                </div>
                <div class="rizhi xialakuang3 la" style="display: none">日志管理</div>
            </ul>
        </div>
        <!-- 右边大版块-->
        <div class="right">
            <div class="header">
                <i class="iconfont icon-liebiao2"></i>
                <i class="iconfont icon-Magnifier"></i>
                <i class="iconfont icon-xiaoxi"></i>
            </div>
            <div class="big-content">
                <!--------------------内容写在这里------------------------------------------------------------------------>
                <div class="content">
                    <div class="content_ok_top">
                        <div class="content_ok_top_title">
                            <h5>期间任务完成情况</h5>
                            <div class="content_ok_top_title_xl" style="margin-right: -10px;">
                                <!-- <div class="select_whidth" style="width: 240px;">
                                    <select class="form-select" id="sel1" name="sellist1">
                                        <option>版本迭代</option>
                                        <option>产品设计</option>
                                        <option>产品原型设计</option>
                                        <option>商业调研</option>
                                        <option>立项申请</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-primary" style="margin-left: 10px;">确认</button> -->
                            </div>
                        </div>
                        <div class="content_max">
                            <!-- 图表1 -->
                            <div id="tuBiao1"></div>
                            <div class="c_right">
                                <div class="right_list" style="width: 80%;">
                                    <h5 style="margin-top: 10px;font-weight: 700;">各负责人任务详情</h5>
                                    <ul class="right_list_main" id="data1">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="content_ok_bottom">
                        <div class="content_ok_top_title">
                            <h5>期间任务停留时长</h5>
                            <div class="content_ok_top_title_xl" style="width:600px;">
                                <div class="select_whidth" style="width: 240px;margin-right: 10px;">
                                    <!-- <select class="form-select" id="sel1" name="sellist1">
                                        <option>版本迭代</option>
                                        <option>产品设计</option>
                                        <option>产品原型设计</option>
                                        <option>商业调研</option>
                                        <option>立项申请</option>
                                    </select> -->
                                </div>
                                <!-- <div class="select_whidth" style="width: 240px;">
                                    <select class="form-select" id="sel1" name="sellist1">
                                        <option>本年</option>
                                        <option>本季度</option>
                                        <option>本月</option>
                                        <option>上月</option>
                                        <option>本周</option>
                                        <option>上周</option>
                                        <option>今日</option>
                                        <option>昨日</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-primary" style="margin-left: 10px;">确认</button> -->
                            </div>
                        </div>
                        <div class="content_max">
                            <!-- 图表1 -->
                            <div id="tuBiao2">

                            </div>
                            <div class="c_right">
                                <div class="right_list" style="width: 80%;">
                                    <h5 style="margin-top: 10px;font-weight: 700;">任务状态详情</h5>
                                    <ul class="right_list_main" id="data2">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!------------------------------------->
                <div class="scroll"></div>
            </div>
        </div>
    </div>
    <!-- ----------------------------------script------------------------------------------>
    <script>
        const li = document.querySelectorAll(".tab li")
        li.forEach((el) => {
            el.addEventListener("click", function (e) {
                console.log(el)
                if (e.target.tagName !== "LI") return
                const old = document.querySelector(".color") // 有特殊样式的元素
                old && old.classList.remove("color") //没有就不清除,有就清除
                e.target.classList.add("color")
            })
        })
        const la = document.querySelectorAll(".la")
        //创建项目下拉框
        let flag4 = true
        const chuangjian = document.querySelector(".chuangjian")
        const xialakuang4 = document.querySelectorAll(".xialakuang4")
        chuangjian.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag4) {
                xialakuang4.forEach((el) => {
                    el.style.display = "block"
                })
                flag4 = false
            } else {
                xialakuang4.forEach((el) => {
                    el.style.display = "none"
                })
                flag4 = true
            }
        }
        //项目下拉框
        let flag = true
        const item = document.querySelector(".item")
        const xialakuang = document.querySelectorAll(".xialakuang")
        item.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag) {
                xialakuang.forEach((el) => {
                    el.style.display = "block"
                })
                flag = false
            } else {
                xialakuang.forEach((el) => {
                    el.style.display = "none"
                })
                flag = true
            }
        }
        // 我的任务
        let flag5 = true
        const renwu = document.querySelector(".renwu")
        const xialakuang5 = document.querySelectorAll(".xialakuang5")
        renwu.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag5) {
                xialakuang5.forEach((el) => {
                    el.style.display = "block"
                })
                flag5 = false
            } else {
                xialakuang5.forEach((el) => {
                    el.style.display = "none"
                })
                flag5 = true
            }
        }
        //报表下拉框
        let flag2 = true
        const baobiao = document.querySelector(".baobiao")
        const xialakuang2 = document.querySelectorAll(".xialakuang2")
        baobiao.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag2) {
                xialakuang2.forEach((el) => {
                    el.style.display = "block"
                })
                flag2 = false
            } else {
                xialakuang2.forEach((el) => {
                    el.style.display = "none"
                })
                flag2 = true
            }
        }
        //   系统管理下拉框
        let flag3 = true
        const xitong = document.querySelector(".xitong")
        const xialakuang3 = document.querySelectorAll(".xialakuang3")
        xitong.onclick = function (e) {
            la.forEach((el) => {
                el.style.display = "none"
            })
            if (flag3) {
                xialakuang3.forEach((el) => {
                    el.style.display = "block"
                })
                flag3 = false
            } else {
                xialakuang3.forEach((el) => {
                    el.style.display = "none"
                })
                flag3 = true
            }
        }
        // 大排它，点击某个导航栏，其他导航栏都收起
    </script>
    <script>
        const send = axios.create({
            baseURL: "http://m10.ctymc.cn:24048"
        })
        let zt1 = 100
        let zt2 = 100
        let zt3 = 100
        let zt4 = 100
        let zt5 = 100
        let zt6 = 100
        send({
            url: "/Task_status",
            method: "GET"
        }).then((res) => {
            console.log(res.data)
            var myChart = echarts.init(document.getElementById('tuBiao1'));
            let option = {
                xAxis: {
                    type: 'category',
                    // 待换数据
                    data: ["组长1","组长2","组长3","组长4","组长5","组长6"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // 待换数据
                        data: [5,10,15,20,25,30],
                        type: 'bar'
                    }
                ]
            };
            let data1 = document.querySelector('#data1')
            for (let i = 0; i < res.data.length; i++) {
                if(i<6){
                    data1.innerHTML += `
                        <li><span>${i + 1}</span><span>${res.data[i].fzr}</span><span>${i*5}</span></li>
                    `
                    
                }
                
                if (res.data[i].status == "设计输出") zt1++
                if (res.data[i].status == "任务设计评估") zt2++
                if (res.data[i].status == "可行性研究") zt3++
                if (res.data[i].status == "试产") zt4++
                if (res.data[i].status == "项目立项") zt5++
                if (res.data[i].status == "开模") zt6++
            }

            let data2 = document.querySelector('#data2')
            data2.innerHTML =`
            <li><span>1</span><span>设计输出</span><span>${zt1}</span></li>
            <li><span>2</span><span>任务设计评估</span><span>${zt2}</span></li>
            <li><span>3</span><span>可行性研究</span><span>${zt3}</span></li>
            <li><span>4</span><span>试产</span><span>${zt4}</span></li>
            <li><span>5</span><span>项目立项</span><span>${zt5}</span></li>
            <li><span>6</span><span>开模</span><span>${zt6}</span></li>
            `

            // 绑定内容
            myChart.setOption(option)

        })




        var myChart = echarts.init(document.getElementById('tuBiao2'));
        let option1 = {
            xAxis: {
                type: 'category',
                data: ['设计输出', '任务设计评估', '可行性研究', '试产', '项目立项目', '开模']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [zt1, zt2, zt3, zt4, zt5, zt6],
                    type: 'bar'
                }
            ]
        };
        // 绑定内容
        myChart.setOption(option1)
    </script>
    <script src="./dianji.js"></script>

</body>

</html>